$(function() {
  // io-client
  // 连接成功会触发服务器端的connection事件
  var socket = io(); 

  // 点击输入昵称
  $('#nameBtn').click(()=> {  
    var imgN = Math.floor(Math.random()*5)+1; // 随机分配头像
    if($('#name').val().trim()!=='')
        socket.emit('login', {  // 触发服务器端登录事件
          name: $('#name').val(),
          img: 'image/user' + imgN + '.jpg'
        }); 
    return false;  
  });

  
  // 登录成功，隐藏登录层
  socket.on('loginSuccess', () => { 
    $('.name').hide(); 
  });
  
  // 登录失败，用户名重复
  socket.on('loginError', () => {
    alert('用户名已存在，请重新输入！');
    $('#name').val('');
  });
  
  // 系统提示消息
  socket.on('system', (user) => { 
    var data = new Date().toTimeString().substr(0, 8);
    $('#messages').append(`<p class='system'><span>${data}</span><br /><span>${user.name}  ${user.status}了聊天室<span></p>`);
    // 滚动条总是在最底部
    $('#messages').scrollTop($('#messages')[0].scrollHeight);
  });
  
  // 显示右侧在线用户
  socket.on('disUser', (userInfo) => {
    displayUser(userInfo)
  });
  
  // 显示在线人员
  function displayUser(users) {
    $('#users').text('')  // 每次渲染重新赋空
    if (!users.length) {
      $('.contacts p').show();
    } else {
      $('.contacts p').hide();
    }
    $('#num').text(users.length);
    for (let i = 0; i < users.length; i++) {
      let $html = `<li> <img src="${users[i].img}"> <span>${users[i].name}</span> </li>`;
      $('#users').append($html)
    }
  }
  
  // 渲染表情
  init();
  function init() {
    for(let i = 0; i < 141; i++) {
      $('.emoji').append('<li id='+i+'><img src="image/emoji/emoji ('+(i+1)+').png"></li>');
    }
  }

  // 显示表情选择面板
  $('#smile').click(()=> {
    $('.selectBox').css('display', "block");
  });
  $('#smile').dblclick((ev)=> { 
    $('.selectBox').css('display', "none");
  });  
  $('#m').click(()=> {
    $('.selectBox').css('display', "none");
  });

  // 用户点击表情
  $('.emoji li img').click((event)=> {
    event = event || window.event;
    var src = event.target.src;
    var emoji = /\((.+)\)/g.exec(src)[1] // 提取序号
    var old = $('#m').val(); // 用户输入的其他内容
    $('#m').val(old+'[emoji'+emoji+']');
    $('.selectBox').css('display', "none");
  });

  // 用户发送图片
  $('#file').change(function() {
    var file = this.files[0]  // 读取第一张图片
    var reader = new FileReader()

    // 文件上传错误时触发
    reader.onerror = function() {
      alert('读取文件失败，请重试')
    }
    // 读取成功
    reader.onload = function() {
      var src = reader.result   // 读取结果
      var img = `<img class="sendImg" src="${src}" >`;
      socket.emit('sendMsg', {
        msg: img,
        color: color,
        type: 'img'   // 发送类型为图片
      })
    }
    reader.readAsDataURL(file)
  })
  // 点击右侧按钮发送消息
  $('#sub').click(sendMsg);
  // 键盘发送事件
  $('#m').keyup((keys) => {
    if (keys.which == 13) {
      sendMsg()
    }
  })

  // 发送窗口抖动
  $('.edit #shake').click(function() {
    socket.emit('shake');
  });

  // 监听抖动事件
  socket.on('shake', (user)=> { 
    var data = new Date().toTimeString().substr(0, 8);
    $('#messages').append(`<p class='system'><span>${data}</span><br /><span>${user.name}发送了一个窗口抖动</span></p>`);
    shake();
    // 滚动条总是在最底部
    $('#messages').scrollTop($('#messages')[0].scrollHeight);
  });

  var timer;
  function shake() {
    $('.main').addClass('shaking');
    clearTimeout(timer);
    timer = setTimeout(()=> {
      $('.main').removeClass('shaking');
    }, 500);
  }

  // 清空历史消息
  $('#clear').click(()=> {
    $('#messages').text('');
    socket.emit('disconnect');
  });

  // 接收消息，渲染页面
  socket.on('receiveMsg', (obj) => {
    // 接收消息类型为图片
    if(obj.type == 'img') {
      $('#messages').append(`
        <li class='${obj.side}'>
          <img src="${obj.img}">
          <div>
            <span>${obj.name}</span>
            <p style="padding: 0;">${obj.msg}</p>
          </div>
        </li>
      `); 
      $('#messages').scrollTop($('#messages')[0].scrollHeight);
      return;
    }
    
    // 提取文字中的表情加以渲染
    var msg = obj.msg;
    var content = '';
    while(msg.indexOf('[') > -1) {  // 其实更建议用正则将[]中的内容提取出来
      var start = msg.indexOf('[');
      var end = msg.indexOf(']');

      content += '<span>'+msg.substr(0, start)+'</span>';
      content += '<img src="image/emoji/emoji%20('+msg.substr(start+6, end-start-6)+').png">';
      // content += '<img src="image/emoji/emoji%20(1).png">';
      msg = msg.substr(end+1, msg.length);
    }
    content += '<span>'+msg+'</span>';
    
    $('#messages').append(`
      <li class='${obj.side}'>
        <img src="${obj.img}">
        <div>
          <span>${obj.name}</span>
          <p style="color: ${obj.color};">${content}</p>
        </div>
      </li>
    `);
    
    // 滚动条总是在最底部
    $('#messages').scrollTop($('#messages')[0].scrollHeight);
  });

  // 发送消息
  function sendMsg() {
    if($('#m').val() == '') {   // 输入消息为空
      alert('请输入内容');
      return false
    }
    socket.emit('sendMsg', {
      msg: $('#m').val(),
      color: $('#color').val()
    });
    $('#m').val('')
    return false
  }

});